<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    function f1() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('1秒');
          // 如果没有resolve,后面调用的函数就无法被then接收，就无法继续链式调用
          resolve()
        }, 1000)
      })
    }

    function f2() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('2秒');
          resolve()
        }, 2000)
      })
    }

    function f3() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('3秒');
          resolve()
        }, 3000)
      })
    }
    // 这种写法虽然不完美，但是可以完全的实现所有异步代码的按顺序执行
    async function get1() {
      await f1().then(() => { f3().then(() => { f2() }) })
    }
    // get1()

    // 下面者这用也可以完美实现异步代码的同步操作
    async function get3() {
      await f3()
      await f1()
      await f2()
    }
    get3()


    function g1() {
      console.log('1秒');
    }
    function g2() {
      console.log('100豪秒')
    }
    function g3() {
      console.log('500豪秒');
    }
    // 这种写法可以指定不是异步操作的函数，可以使用这种方式
    async function get2() {
      await g1()
      await g2()
      await g3()
    }
    // get2()
  </script>
</body>

</html>